<script setup lang="ts">
import {
  reqMenuAdd,
  reqMenuDelete,
  reqMenuEdit,
  reqMenuList,
} from "@/api/permission/permission"
import { MenuResopnse } from "@/api/types/permission"
import type {
  PermissionItems,
  RoleAddPremissionResponse,
} from "@/api/types/role"
import { onMounted, reactive, ref } from "vue"

// 对话框显示隐藏
const dialogVisible = ref(false)
// 菜单列表
const menuList = ref<PermissionItems[]>([])
// 表单验证
const permissionRules = {
  PerName: [{ required: true, message: "菜单名称必填", tigger: "blur" }],
  router: [{ required: true, message: "权限值必填", tigger: "blur" }],
}
// 对话框实例
const dialogRef = ref()
// 控制器
const isWho = ref(1)

// 表单数据
const dialogForm = reactive({
  _id: "",
  PerName: "",
  router: "",
})

// 获取菜单列表
const getMenuList = async () => {
  const result: RoleAddPremissionResponse = await reqMenuList()
  menuList.value = result.data
}

// 对话框关闭事件回掉
const handleClose = () => {
  closeDialog()
}
// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
  Object.assign(dialogForm, {
    PerName: "",
    router: "",
  })
  dialogRef.value.clearValidate(["PerName", "router"])
}
// 新增菜单
const addMenu = async (row: PermissionItems) => {
  dialogVisible.value = true
  isWho.value = 1
  //   赋值参数
  dialogForm._id = row._id
}
// 编辑菜单
const editMenu = (row: PermissionItems) => {
  dialogVisible.value = true
  isWho.value = 2
  Object.assign(dialogForm, row)
  getMenuList()
}
// 删除菜单
const editDelete = async (row: PermissionItems) => {
  const result = await reqMenuDelete(row._id)
  if (result.code == 200) {
    ElMessage.success(result.msg)
    getMenuList()
    return
  }
  ElMessage.error(result.msg)
}

// 提交数据
const save = async () => {
  if (isWho.value == 1) {
    //   新增菜单参数
    const Params = {
      id: dialogForm._id,
      PerName: dialogForm.PerName,
      router: dialogForm.router,
    }
    await dialogRef.value.validate()
    const result: MenuResopnse = await reqMenuAdd(Params)
    if (result.code == 201) {
      ElMessage.success(result.msg)
      closeDialog()
      Object.assign(dialogForm, {
        _id: "",
        PerName: "",
        router: "",
      })
      getMenuList()
      return
    }
    ElMessage.error(result.msg)
  }
  if (isWho.value == 2) {
    //   编辑菜单参数
    const Params = {
      id: dialogForm._id,
      PerName: dialogForm.PerName,
      router: dialogForm.router,
    }
    await dialogRef.value.validate()
    const result: MenuResopnse = await reqMenuEdit(Params)
    if (result.code == 201) {
      ElMessage.success(result.msg)
      closeDialog()
      Object.assign(dialogForm, {
        _id: "",
        PerName: "",
        router: "",
      })
      getMenuList()
      return
    }
    ElMessage.error(result.msg)
  }
}

onMounted(() => {
  getMenuList()
})
</script>

<template>
  <div class="menu">
    <el-card>
      <el-table
        :data="menuList"
        style="width: 100%"
        row-key="_id"
        border
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="PerName" label="菜单名称" />
        <el-table-column prop="router" label="权限值" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="更新时间" />
        <el-table-column label="操作" width="220">
          <template #="{ row }">
            <el-button
              v-has="`Menu.btn.add`"
              type="default"
              :disabled="row.level == 2 ? true : false"
              size="small"
              @click="addMenu(row)"
              >添加菜单</el-button
            >
            <el-button v-has="`Menu.btn.edit`" type="primary" size="small" @click="editMenu(row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确认要删除该菜单吗?"
              @confirm="editDelete(row)"
            >
              <template #reference>
                <el-button
                  v-has="`Menu.btn.delete`"
                  type="danger"
                  :disabled="row.level == 1 ? true : false"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="新增菜单"
      width="500"
      :before-close="handleClose"
    >
      <template #default>
        <el-form
          label-width="80"
          ref="dialogRef"
          :model="dialogForm"
          :rules="permissionRules"
        >
          <el-form-item label="菜单名称" prop="PerName">
            <el-input v-model="dialogForm.PerName" />
          </el-form-item>
          <el-form-item label="权限值" prop="router">
            <el-input v-model="dialogForm.router" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="save"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
